<template>
  <div>
    <join />
    <introduction />
    <counting />
    <el-dialog
      width="1100px"
      :visible.sync="introDialogVisible"
    >
      <dialog-self title="欢迎使用HiTeam视频会议，新手指引">
        <div class="dialog-box">
          <beginner-guide ref="guide"/>
        </div>
      </dialog-self>
    </el-dialog>
  </div>
</template>

<script>
import Join from './Join'
import Introduction from './Introduction'
import Counting from './Counting'
import BeginnerGuide from './BeginnerGuide'
import { mapGetters } from 'vuex'
export default {
  components: {
    Join,
    Introduction,
    Counting,
    BeginnerGuide
  },
  data () {
    return {
      // 新手指引弹框
      introDialogVisible: false
    }
  },
  computed: {
    ...mapGetters({
      isBeginner: 'isBeginner'
    })
  },
  watch: {
    isBeginner: {
      immediate: true,
      handler (newVal) {
        if (newVal) {
          this.handleReset()
        }
      }
    }
  },
  methods: {
    async handleReset () {
      this.introDialogVisible = true
      await this.$nextTick()
      this.$refs.guide.handleResourceContent()
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-box {
  padding: 0px 0px 10px;
}
</style>
